<template>
    <a-form :form="form" @submit="onSubmit">
                <a-row :gutter="24">
                    <a-col :key="1" :span="12">
                        <a-form-item label="分类名称">
                            <a-input placeholder="分类名称" v-decorator="[
                                'name',
                                {rules: [{ required: true, message: '请输入分类名称' }]}
                             ]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :key="2" :span="12">
                        <a-form-item label="计算参数">
                            <a-select v-decorator="['param',{rules: [{ required: true, message: '请选择计算参数' }]}
                                ]" placeholder="请选择计算参数">
                                <a-select-option v-for="(v,k) in counts" :key="k" :value="k">
                                    {{v}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :key="3" :span="24">
                        <a-form-item label="图片">
                            <a-upload name="image" listType="picture-card"
                                      class="avatar-uploader"
                                      :showUploadList="false"
                                      :customRequest="uploadFunc"
                                      :beforeUpload="beforeUpload"
                                      @change="handleFileChange"
                                      v-decorator="['img']"
                            >
                                <img v-if="image_url" :src="image_url" style="width:128px;height:128px" alt="图片">
                                <div v-else>
                                    <a-icon :type="loading ? 'loading' : 'plus'"/>
                                </div>
                            </a-upload>
                        </a-form-item>
                    </a-col>
                    <a-col :key="4" :span="12">
                        <a-form-item label="状态">
                            <a-select v-decorator="['status', {initialValue:1}]" placeholder="请选择类型">
                                <a-select-option :value="1">
                                    启用
                                </a-select-option>
                                <a-select-option :value="0">
                                    禁止
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :key="5" :span="24">
                        <a-form-item label="备注">
                            <a-textarea rows="4" placeholder="请输入备注"
                                        v-decorator="['remark', {
                                    rules: [{
                                        max: 70, message: '字数不超过70'
                                    }]
                                }]" maxLength="70"/>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
</template>


<script>
    import {getBase64} from "@/utils/ImageBase64";

    export default {
        data() {
            return {
                form: this.$form.createForm(this),
                labelCol: {lg: {span: 7}, sm: {span: 7}},
                wrapperCol: {lg: {span: 10}, sm: {span: 17}},
                image_url: '',
                loading: false,
                uploadFunc: file => {
                    this.upload(file);
                },
                counts: [],
            }
        },
        mounted() {
            this.http('get', 'goodscate/counts').then(res => {
                this.counts = res
            })
        },
        methods: {
            onSubmit() {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        values.img = this.image_url;
                        this.postData(values).then(res => {
                            if (res.status == 'success') {
                                this.$message.success(res.msg, 1);
                                this.$emit("hideCreate")
                                this.$emit("getList")
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })
                    }
                })

            },
            async postData(param) {
                let data = await this.http('post', 'goodscate/create', param);
                return data;
            },
            beforeUpload(file) {
                const typeB = file.type == "image/jpeg" || file.type == "image/png";
                if (!typeB) {
                    this.$message.error("请选择jpg,png格式的图片", 1);
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error("图片大小必须小于2MB!", 1);
                }
                return typeB && isLt2M;
            },
            upload(file) {
                getBase64(file.file, base64 => {
                    this.http("post", "upload/upload", {image: base64}).then(res => {
                        this.image_url = res.imgurl;
                        this.loading = false;
                    });
                });
            },
            handleFileChange(info) {
                if (info.file.status === "uploading") {
                    this.loading = true;
                    return;
                }
                if (info.file.status === "done") {
                    this.loading = true;
                    this.upload(info);
                }
            },
        }


    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
